<!-- 表格组件 
iSOnlyShow  是否只显示删除按钮
 tableData  表格数据
 columnList  表格列
 handAdd  新增事件
 handDel  删除事件
  -->
<template>
  <div class="useTable">
    <div class="topRow">
      <el-button
        v-show="iSOnlyShow"
        type="primary"
        @click="handTableAdd()"
        icon="el-icon-circle-plus"
      >
        新增
      </el-button>
    </div>
    <div class="money">
      <el-table :data="tableData" style="width: 100%">
        <!-- <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="180"
        ></el-table-column>
        <el-table-column prop="type" label="编辑" width="180">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="handleTabeDel(scope.row)"
              icon="el-icon-circle-plus"
            >
              删除
            </el-button>
          </template>
        </el-table-column> -->

        <el-table-column
          v-for="(item, index) in columnList"
          :prop="item.prop"
          :label="item.label"
          :key="index"
        ></el-table-column>

        <el-table-column prop="type" label="编辑" v-if="iSOnlyShow">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="handleTabeDel(scope.row)"
              icon="el-icon-delete"
            >
              删除
            </el-button>
            <el-button
              type="primary"
              @click="handleTabeEdit(scope.row)"
              icon="el-icon-edit"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "UseTable",
  props: {
    tableData: {
      type: Array,
      required: true,
    },

    columnList: {
      type: Array,
      required: true,
    },
    iSOnlyShow: {
      type: Boolean,
      required: true,
    },
  },
  methods: {
    handTableAdd() {
      this.$emit("handAdd");
    },
    handleTabeDel(row) {
      this.$emit("handDel", row);
    },
    handleTabeEdit(row) {
      this.$emit("handEdit", row);
    },
  },
};
</script>

<style scoped>
.topRow {
  display: flex;
  margin-bottom: 12px;
}
</style>
